{include file="public/head"/}
<div class="container-fluid">
    <div class="row clearfix" id="search-box" style="margin-top:0">
        <div class="col-md-12 column text-right" v-cloak>
            <div>
                <div class="form-inline" role="form">
                    {eq name="$Think.session.admin.position_id" value="1"}
                    <div class="input-group">
                        <select class="form-control" v-model="country_id" @change="changecountry">
                            <option :value="key" v-for="(item,key) in countrys">
                                {{item}}
                            </option>
                        </select>
                    </div>
                    {/eq}
                    <div class="input-group">
                        <select class="form-control" v-model="depval">
                            <option value="0">{:lang('please_select_company_department')}</option>
                            <option :value="item.id" v-for="(item,index) in deplist">
                                <template v-for="(item,index) in item.level">&nbsp;&nbsp;&nbsp;&nbsp;</template>
                                {{item.langname}}
                            </option>
                        </select>
                    </div>

                    <div class="input-group">
                        <select class="form-control" v-model="posival">
                            <option value="0">{:lang('please_select_a_job')}</option>
                            <option :value="item.id" v-cloak v-for="(item,index) in posilist">
                                <template v-for="(item,index) in item.level">&nbsp;&nbsp;&nbsp;&nbsp;</template>
                                {{item.langname}}
                            </option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="name">{:strtoupper(lang('search_content'))}</label>
                        <input type="text" class="form-control" v-model="dname" @keyup.13="soufun" id="dname"
                               placeholder="{:lang('please_enter_with_account,_nickname,_name_or_job')}">
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-primary" @click="soufun"><span
                                class="glyphicon glyphicon-search"></span>{:strtoupper(lang('search'))}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="alert alert-dismissable alert-info" id="headeralert">
                <button type="button" class="close">×</button>
                <p></p>
            </div>
        </div>
    </div>
    <div class="ntDesktop">

        <div class="ntDesktop-head">{:strtoupper(lang('employees_list'))}</div>

        <div class="row clearfix">
            <div class="col-md-6 column">
                <ul class="nav nav-tabs">
                    <li v-if="isshow_search" class="active">
                        <a href="#home" data-toggle="tab" @click="shdow">搜索结果<span class="glyphicon glyphicon-remove shdow" style="margin-left: 10px;" @click="shdow()"></span></a>
                    </li>

                    <li :class="{'active':status=='' && ! isshow_search}">
                        <a href="#home" data-toggle="tab" @click.prevent="statuschange('')">{:strtoupper(lang('all'))}</a>
                    </li>
                    <li :class="{'active':status==1 && ! isshow_search}">
                        <a href="#home" data-toggle="tab" @click.prevent="statuschange(1)">{:strtoupper(lang('on_the_job'))}</a>
                    </li>
                    <li :class="{'active':status==3 && ! isshow_search}">
                        <a href="#home" data-toggle="tab" id="list-lock" @click.prevent="statuschange(3)">{:strtoupper(lang('locking'))}</a>
                    </li>
                    <li :class="{'active':status==2 && ! isshow_search}">
                        <a href="#home" data-toggle="tab" id="list-leave" @click.prevent="statuschange(2)">{:strtoupper(lang('departure'))}</a>
                        <!-- <a href="#home" data-toggle="tab" id="list-leave" @click.prevent="statuschange(2)">666</a> -->
                    </li>
                </ul>
            </div>
            <div class="col-md-6 column text-right">
                <div>
                    {in name="79" value="$Think.session.admin.auth_ids"}
                    <a href="/admin/Organization/personneladd" class='btn btn-primary' data-toggle="modal"
                       data-target="#worker_editModal"
                       stytle="margin-right:20px"><span class="glyphicon glyphicon-plus"></span>
                        {:strtoupper(lang('add_a_new_employees'))}</a>
                    <span style="padding:10px">&nbsp;</span>{/in}

                    {in name="73" value="$Think.session.admin.auth_ids"}
                    <button type="button" class="btn btn-default option-lock"
                            @click="batchFun('/admin/Organization/personnelock','lock')" v-if="status!=3"><span
                            class="glyphicon glyphicon-lock"></span>{:strtoupper(lang('batch_locking'))}
                    </button>
                    {/in}
                </div>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-md-12 column">
                <table class="table table-striped table-hover ntTable" v-cloak>
                    <thead>
                    <tr>
                        <th style="text-align:center"><input type="checkbox" @click="allsel"/></th>
                        <th> {:strtoupper(lang('account'))}</th>
                        <th> {:strtoupper(lang('nickname/name'))}</th>
                        <th> {:strtoupper(lang('department'))}</th>
                        <th>{:strtoupper(lang('job'))}</th>
                        <th> {:strtoupper(lang('gender'))}</th>
                        <th class="sorting" @click="sortfun(1)" data-order="1"> {:strtoupper(lang('age'))}</th>
                        <th>{:strtoupper(lang('language'))}</th>
                        <th class="sorting" @click="sortfun(2)" data-order="1"> {:strtoupper(lang('date_of_entry'))}</th>
                        <th class="sorting" @click="sortfun(3)" data-order="1"> {:strtoupper(lang('login'))}</th>
                        <th class="sorting" @click="sortfun(4)" data-order="1"> {:strtoupper(lang('edit'))}</th>
                        <th style="text-align: center;"> {:strtoupper(lang('operate'))}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in list" :key="item.id+status" v-if="list.length>0">
                        <td align="center"><input type="checkbox" @click="onesel(item.id)"/></td>
                        <td align="left"> {{item.name}}</td>

                        <td v-if="item.nickname==item.username"> {{item.nickname}}</td>
                        <td v-else="item.nickname!=item.username"> {{item.nickname}} <br>
                            <small>{{item.username}}</small>
                        </td>
                        <td> {{item.departmentname}}</td>
                        <td> {{item.positionname}}</td>
                        <td> {{item.sex}}</td>
                        <td> {{item.age}}</td>
                        <td> {{item.langperson}}</td>
                        <td> {{item.work_day_date}}</td>
                        <td><span v-if="item.login_date!='-'">{{item.loginip}}<br><span v-if="item.loginaddress">{{item.loginaddress}}<br></span><small>{{item.login_date}}</small></span><span
                                v-else>{{item.login_date}}</span>
                        </td>
                        <td> {{item.mangname}} <br/>
                            <small>{{item.update_date}}</small>
                        </td>
                        <td class="text-right">
                            <div>
                                {in name="72" value="$Think.session.admin.auth_ids"}
                                <a :href="'/admin/Organization/personnelxiangqin?id='+item.id"
                                   class='btn btn-sm btn-primary' data-toggle="modal" data-target="#worker_detailModal"
                                   onfocus="this.blur()"><span
                                        class="glyphicon glyphicon-sunglasses"></span> {:strtoupper(lang('details'))}</a>
                                {/in}
                                {in name="80" value="$Think.session.admin.auth_ids"}
                                <a :href="'/admin/Organization/personneledit?id='+item.id"
                                                               class='btn btn-sm btn-primary' data-toggle="modal"
                                                               data-target="#worker_editModal" onfocus="this.blur()"><span
                                        class="glyphicon glyphicon-pencil"></span>
                                    {:strtoupper(lang('edit'))}</a>

                                {/in}
                                {in name="181" value="$Think.session.admin.auth_ids"}
                                <a :href="'/admin/Organization/persetroot?id='+item.id" class='btn btn-sm btn-primary'
                                   data-toggle="modal" data-target="#menu2admin_editModal"><span
                                        class="fa fa-cogs"></span> {:strtoupper(lang('authority'))}</a>
                                {/in}

                                {in name="78" value="$Think.session.admin.auth_ids"}
                                <a :href="'/admin/Organization/personnelreset?id='+item.id+'&dname='+item.nickname"
        class='btn btn-sm btn-primary option-repassword' data-toggle="modal"
        data-target="#worker_repasswordModal" onfocus="this.blur()"><span
                                        class="glyphicon glyphicon-retweet"></span>{:strtoupper(lang('reset_password'))} </a>
                                {/in}

                                {in name="73" value="$Think.session.admin.auth_ids"}
                                <a v-if="item.status!=3" href="javascript:;" class='btn btn-sm btn-default option-lock'
                                   @click="batchFun('/admin/Organization/personnelock','lock',item.id)"><span
                                        class="glyphicon glyphicon-lock"></span>{:strtoupper(lang('locking'))}</a>
                                {/in}
                                {in name="74" value="$Think.session.admin.auth_ids"}
                                <a v-if="item.status==3" href="javascript:;"
                                   class='btn btn-sm btn-default option-unlock'
                                   @click="batchFun('/admin/Organization/personnelunlock','unlock',item.id)"><span
                                        class="glyphicon glyphicon-leaf"></span>{:strtoupper(lang('unlock'))}</a>
                                {/in}

                                {in name="75" value="$Think.session.admin.auth_ids"}
                                <a v-if="item.status!=2" href="javascript:;" class='btn btn-sm btn-default option-leave'
                                   @click="batchFun('/admin/Organization/personneleave','leave',item.id)"><span
                                        class="glyphicon glyphicon-erase"></span>{:strtoupper(lang('departure'))}</a>
                                {/in}

                                {in name="76" value="$Think.session.admin.auth_ids"}
                                <a v-if="item.status==2" href="javascript:;"
                                   class='btn btn-sm btn-default option-recover'
                                   @click="batchFun('/admin/Organization/personneresume','resume',item.id)"><span
                                        class="glyphicon glyphicon-briefcase"></span>{:strtoupper(lang('reinstate'))}</a>
                                {/in}
                                {in name="77" value="$Think.session.admin.auth_ids"}
                                <a href="javascript:;" class='btn btn-sm btn-default option-clear'
                                   @click="batchFun('/admin/Organization/personnedelete','delete',item.id)"><span
                                        class="glyphicon glyphicon-fire"></span>{:strtoupper(lang('clear'))}</a>
                                {/in}
                            </div>
                        </td>
                    </tr>
                    <tr style="text-align: center;" v-if="list.length==0">
                        <td colspan="12" class="no_date">{:strtoupper(lang('no_data'))}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-md-12 column">
                <ul class="pagination" id="pagination" v-show="list.length!=0">
                </ul>
            </div>
        </div>

    </div>
</div>

<!-- InstanceEndEditable --></div>

<!--添加弹窗部分 开始-->
<div class="modal fade" id="worker_editModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel"
     aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<!-- 员工资料详情modal窗 -->
<div class="modal fade" id="worker_detailModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- 密码重置modal窗 -->
<div class="modal fade" id="worker_repasswordModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel"
     aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog ">
        <div class="modal-content" style="width:700px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div class="modal fade" id="menu2admin_editModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel"
     aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--弹窗部分 结束-->
{include file="public/foot"/}

<script>
    Vue.directive('focus', {
        bind: function (el) {
            el.focus()
        },
        inserted: function (el) {
            el.focus();//自动获取焦点
        },
    })
    var table = new Vue({
        el: '.container-fluid',
        data: {
            list: [],//数据
            page: 1,//分页
            pageSize: 30,//条数
            status: 1,
            batch: [],//ids
            allid: [],//当前页ids
            order: 1,
            lang: 'zh',//网站默认语言
            pauname: '',
            deplist: [],//部门
            posilist: [],//职位
            countrys: [],
            depval: 0,//部门查询
            posival: 0,//职位查询
            dname: '',//账号查询
            country_id: '0',
            isshow_search: false
        },
        methods: {
            setPage(pageCurrent, pageSum) {
                //数据总条数
                var myPageCount = pageSum;
                //一页显示多少条
                var myPageSize = this.pageSize;
                //总页数
                var countindex = myPageCount % myPageSize > 0 ? (myPageCount / myPageSize) + 1 : (myPageCount / myPageSize);
                $.jqPaginator('#pagination', {
                    totalPages: parseInt(countindex),
                    //最多显示多少页
                    visiblePages: 5,
                    //默认显示第几页
                    currentPage: pageCurrent,
                    first: '<li class="first"><a href="javascript:;">' + langcon.page_home + '</a></li>',
                    prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>' + langcon.previous_page + '</a></li>',
                    next: '<li class="next"><a href="javascript:;">' + langcon.next_page + '<i class="arrow arrow3"></i></a></li>',
                    last: '<li class="last"><a href="javascript:;">' + langcon.last_page + '</a></li>',
                    page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
                    all: '<li class="page"><a href="javascript:;">' + myPageCount + ' / ' + this.page + 'PG , ' + this.pageSize + ' /PG</a></li>',
                    onPageChange: (num, type) => {
                        if (type == "change") {
                            this.page = num
                            this.getAllList(2)
                        }
                    }
                });
            },
            //数据所有获取
            getAllList(code){
                $('.loding').show()
                $('table input').prop('checked', false)
                this.batch = [];
                $.ajax({
                    url: "/admin/organization/personnel",
                    type: 'post',
                    data: {
                        page: this.page,//分页
                        pageSize: this.pageSize,//条数
                        status: this.status,
                        department_id: this.depval,//部门查询
                        position_id: this.posival,//职务查询
                        dname: this.dname,//账号，昵称，姓名
                    },
                    dataType: "json",
                    success: (result) => {
                        $('.loding').hide();
                        this.list = result.getmanage;//员工
                        if(code==2){
                            this.country_id = result.country_id;//这个员工的国家id
                        }
                        this.countrys = result.country;//所有国家
                        this.lang = result.lang//系统默认语言
                        this.allid = result.dataids;
                        if(result.size)
                        this.setPage(parseInt(this.page), result.size);
                        //切换国家
                        this.changecountry();
                    }
                })
            },
            //切换状态
            statuschange(status){
                this.depval = 0;
                this.posival = 0;
                this.dname = '';
                this.isshow_search = false
                this.status = status;
                this.page = '1';
                this.getAllList(2);
            },
            //切换国家
            changecountry(){
                //获取对应的职位
                this.getframepos('position', 1);
                //获取对应的部门
                this.getframepos('department', 2);
            },
            //获取对应国家的职位和部门
            getframepos(table, code){
                $.ajax({
                    url: '/admin/api/postionfrmaes',
                    data: {
                        country_id: this.country_id,
                        table: table,
                        lang: this.lang
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        if (table == 'position') {
                            //职位
                            this.posilist = data;
                        } else {
                            //部门
                            this.deplist = data;
                        }
                    }
                })
            },
            onesel(did){
                if (this.batch.indexOf(did) == -1) {
                    this.batch.push(did)
                } else {
                    this.batch.splice(this.batch.indexOf(did), 1)
                }
                var isall = true
                $('td input').each(function () {
                    if (!$(this).prop('checked')) {
                        isall = false
                    }
                })
                $('th input').prop('checked', isall)
            },
            //全选
            allsel(event){
                if ($(event.target).prop('checked')) {
                    $(event.target).parents('table').find('input').prop('checked', true)
                    this.batch = this.allid
                } else {
                    $(event.target).parents('table').find('input').prop('checked', false)
                    this.batch = []
                }
            },
            //状态调整
            batchFun(requrl, reqact, did){
                var data = {
                    act: reqact,
                    id: this.batch.join(',')
                }
                if (did) {
                    data.id = did
                } else {
                    data.id = this.batch.join(',')
                }
                $.ajax({
                    url: requrl,
                    data,
                    type: 'post',
                    success: (data) => {
                        data = JSON.parse(data)
                        change_mes_type('#headeralert', data.status)
                        $('#headeralert').show()
                        $('#headeralert p').html('*' + data.msg + '<br>')
                        if(data.status==1){
                            if (this.page > Math.ceil(this.list.length - 1 / this.pageSize)) {
                                if (this.page > 1) {
                                    this.page--
                                }
                            }
                            this.getAllList(2)
                        }
                    }
                })
            },
            sortoneData(a, b) {
                if (this.order == 1) {
                    $(event.target).attr('data-order', 2)
                    return b[this.pauname] - a[this.pauname]
                } else {
                    $(event.target).attr('data-order', 1)
                    return a[this.pauname] - b[this.pauname]
                }
            }
            ,
            sortfun(type, $event){
                this.order = $(event.target).attr('data-order')
                if (type == 1) {
                    this.pauname = 'age'
                    this.list.sort(this.sortoneData);
                }
                if (type == 2) {
                    this.pauname = 'work_day'
                    this.list.sort(this.sortoneData);
                }
                if (type == 3) {
                    this.pauname = 'login_time'
                    this.list.sort(this.sortoneData);
                }
                if (type == 4) {
                    this.pauname = 'update_at'
                    this.list.sort(this.sortoneData);
                }
            },
            //搜索条件(满足时才可以搜索)
            soufun(){
                if(this.dname || this.posival || this.depval){
                    this.isshow_search = true;
                    this.status = '11';
                }else {
                    this.isshow_search = false;
                    this.status='1';
                }
                this.page = '1';
                this.getAllList(1)
            },
            //关闭搜索
            shdow(){
                this.page = '1';
                this.depval = 0;
                this.posival = 0;
                this.dname = '';
                this.status = '';
                this.isshow_search = false
                this.getAllList(2)
            },
        },
        created(){
            this.getAllList(2)
            $('#worker_editModal').on('hide.bs.modal', () => {
                if(localStorage.getItem("model")){
                    this.getAllList(2);
                    localStorage.removeItem("model");
                }
            })
        }
    })
    $("#worker_editModal").on("hide.bs.modal", function () {
        $(this).removeData("bs.modal");
        $(".modal-content").children().remove();
        $(document).unbind('keydown')
    });
    $("#worker_detailModal").on("hide.bs.modal", function () {
        $(this).removeData("bs.modal");
        $(document).unbind('keydown')
    });
    $("#worker_repasswordModal").on("hide.bs.modal", function () {
        $(this).removeData("bs.modal");
        $(".modal-content").children().remove();
        $(document).unbind('keydown')
    });
    $("#menu2admin_editModal").on("hide.bs.modal", function () {
        $(this).removeData("bs.modal");
        $(".modal-content").children().remove();
        $(document).unbind('keydown')
    });
</script>
